
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>试题添加</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="https://demo.easyweb.vip/iframe/assets/module/admin.css?v=318"/>
	<script type="text/javascript" src="/static/js/jquery-1.7.2.js"></script>
    <style>
        [lay-filter="eQuestionForm"] .layui-form-item, .layui-inline {
            margin-bottom: 0;
            margin-top: 20px;
        }

        .qa-xx-item {
            padding-left: 25px;
            margin-bottom: 20px;
        }

        .qa-xx-item-title {
            position: absolute;
            left: 0;
            line-height: 38px;
        }

    </style>
</head>
<body>

<!-- 正文开始 -->
<div class="layui-fluid container">
    <div class="layui-card">
        <div class="layui-card-body" id="tid" th:attr="name=${topic.tid}">
            <form class="layui-form" lay-filter="eQuestionForm">
                <input type="hidden" name="questionId" value=""/>
                <div class="layui-form-item" style="margin-top: 0;">
                	<div class="layui-inline">
                        <label class="layui-form-label">试题年级：</label>
                        <div class="layui-input-inline">
                            <select name="questionTypeId" id="grade" lay-verify="required" required>
                                <option value="0" th:if="${topic.tgrade==0}" selected="selected">初三上册</option>
                                <option value="0" th:if="${topic.tgrade!=0}">初三上册</option>
                                <option value="1" th:if="${topic.tgrade==1}" selected="selected">初三下册</option>
                                <option value="1" th:if="${topic.tgrade!=1}">初三下册</option>
                                <option value="2" th:if="${topic.tgrade==2}" selected="selected">高一上册</option>
                                <option value="2" th:if="${topic.tgrade!=2}">高一上册</option>
                                <option value="3" th:if="${topic.tgrade==3}" selected="selected">高一下册</option>
                                <option value="3" th:if="${topic.tgrade!=3}">高一下册</option>
                                <option value="4" th:if="${topic.tgrade==4}" selected="selected">高二上册</option>
                                <option value="4" th:if="${topic.tgrade!=4}">高二上册</option>
                                <option value="5" th:if="${topic.tgrade==5}" selected="selected">高二下册</option>
                                <option value="5" th:if="${topic.tgrade!=5}">高二下册</option>
                                <option value="6" th:if="${topic.tgrade==6}" selected="selected">高三上册</option>
                                <option value="6" th:if="${topic.tgrade!=6}">高三上册</option>
                                <option value="7" th:if="${topic.tgrade==7}" selected="selected">高三下册</option>
                                <option value="7" th:if="${topic.tgrade!=7}">高三下册</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">试题分类：</label>
                        <div class="layui-input-inline">
                            <select name="questionTypeId" id="classify" lay-verify="required" required>
                                <option value="0" th:if="${topic.tclassify==0}" selected="selected">元素表</option>
                                <option value="0" th:if="${topic.tclassify!=0}">元素表</option>
                                <option value="1" th:if="${topic.tclassify==1}" selected="selected">燃烧</option>
                                <option value="1" th:if="${topic.tclassify!=1}">燃烧</option>
                                <option value="2" th:if="${topic.tclassify==2}" selected="selected">空气成分</option>
                                <option value="2" th:if="${topic.tclassify!=2}">空气成分</option>
                                <option value="3" th:if="${topic.tclassify==3}" selected="selected">溶解沉淀平衡</option>
                                <option value="3" th:if="${topic.tclassify!=3}">溶解沉淀平衡</option>
                                <option value="4" th:if="${topic.tclassify==4}" selected="selected">电离平衡</option>
                                <option value="4" th:if="${topic.tclassify!=4}">电离平衡</option>
                                <option value="5" th:if="${topic.tclassify==5}" selected="selected">有机物</option>
                                <option value="5" th:if="${topic.tclassify!=5}">有机物</option>
                                <option value="6" th:if="${topic.tclassify==6}" selected="selected">其他</option>
                                <option value="6" th:if="${topic.tclassify!=6}">其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">难度系数：</label>
                        <div class="layui-input-inline">
                            <select name="difficulty" lay-verType="tips" id="difficulty" lay-verify="required" required>
                                <option value="0" th:if="${topic.tdifficulty==0}" selected="selected">★</option>
                                <option value="0" th:if="${topic.tdifficulty!=0}">★</option>
                                <option value="1" th:if="${topic.tdifficulty==1}" selected="selected">★★</option>
                                <option value="1" th:if="${topic.tdifficulty!=1}">★★</option>
                                <option value="2" th:if="${topic.tdifficulty==2}" selected="selected">★★★</option>
                                <option value="2" th:if="${topic.tdifficulty!=2}">★★★</option>
                                <option value="3" th:if="${topic.tdifficulty==3}" selected="selected">★★★★</option>
                                <option value="3" th:if="${topic.tdifficulty!=3}">★★★★</option>
                                <option value="4" th:if="${topic.tdifficulty==4}" selected="selected">★★★★★</option>
                                <option value="4" th:if="${topic.tdifficulty!=4}">★★★★★</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">试题类型：</label>
                    <div class="layui-input-block" id="ttypeMessage" th:attr="name=${topic.ttype}">
                        <input type="radio" lay-filter="raQT" name="typeId" value="0" th:if="${topic.ttype==0}" title="单选题" checked>
                        <input type="radio" lay-filter="raQT" name="typeId" value="0" th:if="${topic.ttype!=0}" title="单选题" disabled>
                        <input type="radio" lay-filter="raQT" name="typeId" value="1" th:if="${topic.ttype==1}" title="多选题" checked>
                        <input type="radio" lay-filter="raQT" name="typeId" value="1" th:if="${topic.ttype!=1}" title="多选题" disabled>
                        <input type="radio" lay-filter="raQT" name="typeId" value="2" th:if="${topic.ttype==2}" title="判断题" checked>
                        <input type="radio" lay-filter="raQT" name="typeId" value="2" th:if="${topic.ttype!=2}" title="判断题" disabled>
                        <input type="radio" lay-filter="raQT" name="typeId" value="3" th:if="${topic.ttype==3}" title="填空题" checked>
                        <input type="radio" lay-filter="raQT" name="typeId" value="3" th:if="${topic.ttype!=3}" title="填空题" disabled>
                        <input type="radio" lay-filter="raQT" name="typeId" value="4" th:if="${topic.ttype==4}" title="计算题" checked>
                        <input type="radio" lay-filter="raQT" name="typeId" value="4" th:if="${topic.ttype!=4}" title="计算题" disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">试题内容：</label>
                    <div class="layui-input-block">
                        <textarea name="content" id="eQuestionContentEdt" th:attr="name=${topic.tmessage}"
                                  style="display: block !important;visibility: hidden;height: 1px;border: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text" id="eQuestionSelGroup">
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">正确答案：</label>
                    <div id="qaRIGroup" class="layui-input-block">
                    </div>
                    <div class="layui-input-block" style="display: none;" id="gapfillingDiv">
                        <textarea name="content" id="qaRIGroupTextarea" style="display: block !important;
                        visibility: hidden;height: 1px;border: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block text-center">
		               <button ew-event="closeThisTabs" type="button" class="layui-btn layui-btn-primary" id="cloneDemoEdtInsertContent">&emsp;取消&emsp;</button>
		               <button class="layui-btn" lay-filter="eQuestionSubmit" lay-submit id="eQuestionSubmit">&emsp;修改&emsp;</button>
		           </div>
                </div>
            </form>
        </div>
    </div>
    <div id="tanswerallMessage" th:attr="name=${topic.tanswerall}"></div>
    <div id="tanswerMessage" th:attr="name=${topic.tanswer}"></div>
</div>
<script type="text/javascript">
$(top.hangge());	
</script>
<!-- 不同类型题目的正确答案选项 -->
<script type="text/html" id="eQuestionSinTpl">
    <!-- 单选题 -->
    <div style="max-width: 160px;">
        <select name="answer" id="answer" lay-verType="tips" lay-verify="required" required>
            <option value="A" th:if="${topic.tanswer=='A'}" selected="selected">A</option>
            <option value="A" th:if="${topic.tanswer!='A'}">A</option>
            <option value="B" th:if="${topic.tanswer=='B'}" selected="selected">B</option>
            <option value="B" th:if="${topic.tanswer!='B'}">B</option>
            <option value="C" th:if="${topic.tanswer=='C'}" selected="selected">C</option>
            <option value="C" th:if="${topic.tanswer!='C'}">C</option>
            <option value="D" th:if="${topic.tanswer=='D'}" selected="selected">D</option>
            <option value="D" th:if="${topic.tanswer!='D'}">D</option>
        </select>
    </div>
</script>
<script type="text/html" id="eQuestionMulTpl">
    <!-- 多选题 -->
    <div style="max-width: 220px;" id="qaRIMore">
    </div>
</script>
<script type="text/html" id="eQuestionTfTpl">
    <!-- 判断题 -->
    <div style="max-width: 160px;">
        <select name="answer" id="answer" lay-verType="tips" lay-verify="required" required>
            <option value="T" th:if="${topic.tanswer=='T'}" selected="selected">正确</option>
            <option value="T" th:if="${topic.tanswer!='T'}">正确</option>
            <option value="F" th:if="${topic.tanswer=='F'}" selected="selected">错误</option>
            <option value="F" th:if="${topic.tanswer!='F'}">错误</option>
        </select>
    </div>
</script>
<script type="text/html" id="eQuestionGapfilling">
            <input type="text" name="gapfilling" id="gapfilling" placeholder="请用空格或中文顿号（、）进行区分" class="layui-input"
                  selected="selected" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
</script>
<script type="text/html" id="eQuestionSelTpl">
    <label class="layui-form-label">试题选项：</label>
    <div class="layui-input-block">
        <div class="qa-xx-item">
            <span class="qa-xx-item-title">A：</span>
            <input type="text" name="xxA" id="xxA" placeholder="请输入选项内容" class="layui-input"
                   autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        <div class="qa-xx-item">
            <span class="qa-xx-item-title">B：</span>
            <input type="text" name="xxB" id="xxB" placeholder="请输入选项内容" class="layui-input"
                   autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        <div class="qa-xx-item">
            <span class="qa-xx-item-title">C：</span>
            <input type="text" name="xxC" id="xxC" placeholder="请输入选项内容" class="layui-input"
                   autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        <div class="qa-xx-item">
            <span class="qa-xx-item-title">D：</span>
            <input type="text" name="xxD" id="xxD" placeholder="请输入选项内容" class="layui-input" 
					autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>
</script>

<!-- js部分 -->
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="https://demo.easyweb.vip/iframe/assets/js/common.js?v=318"></script>
<script>
    layui.use(['layer', 'form', 'xmSelect', 'layedit'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var xmSelect = layui.xmSelect;
        var layedit = layui.layedit;
        var topicType = 1;
		var qaRIMorelet = '';
        var editIndex = layedit.build('eQuestionContentEdt'); // 建立编辑器
        var nextIndex = layedit.build('qaRIGroupTextarea'); // 建立编辑器
        flush();
        function flush(){
        	setTimeout(function(){
        		layedit.setContent(editIndex,$("#eQuestionContentEdt").attr("name"));
        		$("#eQuestionContentEdt").attr("name","");
			 },500);
        	
        }
        // 表单提交事件
        form.on('submit(eQuestionSubmit)', function (data) {
          	 let dataMessage = layedit.getContent(editIndex)+'';
          	 let classify = $("#classify").val();
          	 let grade = $("#grade").val();
          	 let difficulty = $("#difficulty").val();
          	 let params = {};
          	 params.classify = classify;
          	 params.type = topicType;
          	 params.grade = grade;
          	 params.difficulty = difficulty;//难度
          	 params.tmessage = dataMessage;
          	 params.id = $("#tid").attr("name");
          	 if(topicType == 0){
          		let answerAll = $("#xxA").val()+'：￥、￥：'+$("#xxB").val()+'：￥、￥：'+$("#xxC").val()+'：￥、￥：'+$("#xxD").val()+'';
          		params.answerall = answerAll;
          		let answer = $("#answer").val()+'';
          		params.answer = answer;
          	 } else if(topicType == 1){
          		let answerAll = $("#xxA").val()+'：￥、￥：'+$("#xxB").val()+'：￥、￥：'+$("#xxC").val()+'：￥、￥：'+$("#xxD").val()+'';
          		params.answerall = answerAll;
          		params.answer = qaRIMorelet.getValue('valueStr')+'';
          	 } else if(topicType == 2){
          		params.answerall = '';
          		params.answer = $("#answer").val()+'';
          	 } else if(topicType == 3){
          		params.answerall = '';
          		params.answer = $("#gapfilling").val()+'';
          	 } else if(topicType == 4){
          		params.answerall = '';
          		params.answer = layedit.getContent(nextIndex)+'';
          	 }
          	 $.ajax( {
	             url : '/topic/user/modification', 
	             type : 'post',
	             data: params,
	             dataType : 'json',
	             success : function(data) {
	            	 if(data.code==0){
	            		 layer.msg(data.msg,{icon: 1});
	            		 setTimeout(function(){
	            			 var index = parent.layer.getFrameIndex(window.name);
	            			 parent.layer.close(index);
						 },1500);
		        	 }else{
		        		 layer.msg(data.msg,{icon: 2});
		        	 }
	             }
	         });
            //layer.msg("表单验证通过", {icon: 1});
            return false;
        });
        $('#cloneDemoEdtInsertContent').click(function () {
     		var index = parent.layer.getFrameIndex(window.name);
  			parent.layer.close(index);
        });
        changeQT($("#ttypeMessage").attr("name"));

        function changeQT(value, sel) {
        	topicType = value;
        	$('#qaRIGroup').css("display","block");
        	$('#gapfillingDiv').css("display","none");
            if (value == 0) {
                $('#qaRIGroup').html($('#eQuestionSinTpl').html());
                form.render('select', 'eQuestionForm');
                $('#eQuestionSelGroup').html($('#eQuestionSelTpl').html());
                $("#xxA").val($("#tanswerallMessage").attr("name").split('：￥、￥：')[0])
                $("#xxB").val($("#tanswerallMessage").attr("name").split('：￥、￥：')[1])
                $("#xxC").val($("#tanswerallMessage").attr("name").split('：￥、￥：')[2])
                $("#xxD").val($("#tanswerallMessage").attr("name").split('：￥、￥：')[3])
            } else if (value == 1) {
                $('#qaRIGroup').html($('#eQuestionMulTpl').html());
                let tanswer = $("#tanswerMessage").attr("name");
                if(tanswer==='A'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A',selected: true},
                            {name: 'B', value: 'B'},
                            {name: 'C', value: 'C'},
                            {name: 'D', value: 'D'}
                        ]
                    });
                } else if(tanswer==='B'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A'},
                            {name: 'B', value: 'B',selected: true},
                            {name: 'C', value: 'C'},
                            {name: 'D', value: 'D'}
                        ]
                    });
                } else if(tanswer==='C'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A'},
                            {name: 'B', value: 'B'},
                            {name: 'C', value: 'C',selected: true},
                            {name: 'D', value: 'D'}
                        ]
                    });
                } else if(tanswer==='D'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A'},
                            {name: 'B', value: 'B'},
                            {name: 'C', value: 'C'},
                            {name: 'D', value: 'D',selected: true}
                        ]
                    });
                } else if(tanswer==='A,B'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A',selected: true},
                            {name: 'B', value: 'B',selected: true},
                            {name: 'C', value: 'C'},
                            {name: 'D', value: 'D'}
                        ]
                    });
                } else if(tanswer==='A,C'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A',selected: true},
                            {name: 'B', value: 'B'},
                            {name: 'C', value: 'C',selected: true},
                            {name: 'D', value: 'D'}
                        ]
                    });
                } else if(tanswer==='A,D'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A',selected: true},
                            {name: 'B', value: 'B'},
                            {name: 'C', value: 'C'},
                            {name: 'D', value: 'D',selected: true}
                        ]
                    });
                } else if(tanswer==='B,C'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A'},
                            {name: 'B', value: 'B',selected: true},
                            {name: 'C', value: 'C',selected: true},
                            {name: 'D', value: 'D'}
                        ]
                    });
                } else if(tanswer==='B,D'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A'},
                            {name: 'B', value: 'B',selected: true},
                            {name: 'C', value: 'C'},
                            {name: 'D', value: 'D',selected: true}
                        ]
                    });
                } else if(tanswer==='C,D'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A'},
                            {name: 'B', value: 'B'},
                            {name: 'C', value: 'C',selected: true},
                            {name: 'D', value: 'D',selected: true}
                        ]
                    });
                } else if(tanswer==='A,B,C'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A',selected: true},
                            {name: 'B', value: 'B',selected: true},
                            {name: 'C', value: 'C',selected: true},
                            {name: 'D', value: 'D'}
                        ]
                    });
                } else if(tanswer==='A,B,D'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A',selected: true},
                            {name: 'B', value: 'B',selected: true},
                            {name: 'C', value: 'C'},
                            {name: 'D', value: 'D',selected: true}
                        ]
                    });
                } else if(tanswer==='A,C,D'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A',selected: true},
                            {name: 'B', value: 'B'},
                            {name: 'C', value: 'C',selected: true},
                            {name: 'D', value: 'D',selected: true}
                        ]
                    });
                } else if(tanswer==='B,C,D'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A'},
                            {name: 'B', value: 'B',selected: true},
                            {name: 'C', value: 'C',selected: true},
                            {name: 'D', value: 'D',selected: true}
                        ]
                    });
                } else if(tanswer==='A,B,C,D'){
                	qaRIMorelet = xmSelect.render({
                        el: '#qaRIMore',
                        data: [
                            {name: 'A', value: 'A',selected: true},
                            {name: 'B', value: 'B',selected: true},
                            {name: 'C', value: 'C',selected: true},
                            {name: 'D', value: 'D',selected: true}
                        ]
                    });
                }
                $('#eQuestionSelGroup').html($('#eQuestionSelTpl').html());
                $("#xxA").val($("#tanswerallMessage").attr("name").split('：￥、￥：')[0])
                $("#xxB").val($("#tanswerallMessage").attr("name").split('：￥、￥：')[1])
                $("#xxC").val($("#tanswerallMessage").attr("name").split('：￥、￥：')[2])
                $("#xxD").val($("#tanswerallMessage").attr("name").split('：￥、￥：')[3])
            } else if (value == 2) {
                $('#qaRIGroup').html($('#eQuestionTfTpl').html());
                form.render('select', 'eQuestionForm');
                $('#eQuestionSelGroup').html('');
            } else if (value == 3) {
            	$('#qaRIGroup').html($('#eQuestionGapfilling').html());
                $('#eQuestionSelGroup').html('');
                $('#qaRIGroupTextarea').html('');
                $("#gapfilling").val($("#tanswerMessage").attr("name"));
            } else if (value == 4) {
            	$('#eQuestionSelGroup').html('');
            	$('#qaRIGroup').css("display","none");
            	$('#gapfillingDiv').css("display","block");
            	setTimeout(function(){
            		layedit.setContent(nextIndex,$("#tanswerMessage").attr("name"));
    			 },500);
            	
            }
        }
    });
</script>
</body>
</html>